<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      width: 100%;
      max-width: 400px;
      padding: 30px;
      background-color: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      text-align: center;
    }

    h2 {
      margin-bottom: 20px;
      color: #333;
    }

    form {
      display: flex;
      flex-direction: column;
    }

    label {
      margin-top: 10px;
      font-size: 14px;
      text-align: left;
      margin-left: 10px;
    }

    input {
      padding: 10px;
      margin-top: 5px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: calc(100% - 22px);
      margin-left: 10px;
      margin-right: 10px;
    }

    button {
      padding: 10px;
      margin-top: 20px;
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: calc(100% - 22px);
      margin-left: 10px;
      margin-right: 10px;
    }

    button:hover {
      background-color: #45a049;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>欢迎登录信息墙</h2>
    <form id="loginForm">
      <label for="username">请输入账号</label>
      <input type="text" id="username" name="username" required>
      <label for="password">请输入密码</label>
      <input type="password" id="password" name="password" required>
      <label for="email">请输入邮箱</label>
      <div style="display: flex; align-items: center; margin: 5px 10px;">
        <input type="email" id="email" name="email" required style="flex: 1; margin: 0;">
        <button type="button" id="sendCodeBtn" onclick="sendEmailCode()" style="width: auto; margin-left: 10px; padding: 10px 15px;">获取验证码</button>
      </div>
      <label for="emailCode">邮箱验证码</label>
      <input type="text" id="emailCode" name="emailCode" required>
      <label for="captcha">图形验证码</label>
      <div style="display: flex; align-items: center; margin: 5px 10px;">
        <input type="text" id="captcha" name="captcha" required style="flex: 1; margin: 0;">
        <img id="captchaImg" src="/vc.jpg" alt="验证码" style="margin-left: 10px; cursor: pointer; height: 38px;">
      </div>
      <button type="button" onclick="login()">登录</button>
    </form>
  </div>

  <script>
    // 添加验证码刷新功能
    document.getElementById('captchaImg').onclick = function() {
      this.src = '/vc.jpg?' + new Date().getTime();
    };

    //发送邮箱验证码
    let countdown = 60;
    let timer = null;
    const sendCodeBtn = document.getElementById('sendCodeBtn');
    // 开始倒计时
    function startCountdown() {
      if (timer) return; // 防止重复点击
      sendCodeBtn.disabled = true;
      sendCodeBtn.style.backgroundColor = '#cccccc';
      countdown = 60; // 重置倒计时
      timer = setInterval(() => {
        countdown--;
        sendCodeBtn.textContent = `${countdown}秒后重试`;
        if (countdown <= 0) {
          clearInterval(timer);
          timer = null; // 清除定时器引用
          sendCodeBtn.disabled = false;
          sendCodeBtn.textContent = '获取验证码';
          sendCodeBtn.style.backgroundColor = '#4CAF50';
        }
      }, 1000);
    }
    // 发送邮箱验证码
    function sendEmailCode() {
      const email = document.getElementById('email').value;
      if (!email) {
        alert('请输入邮箱地址');
        return;
      }
      // 防止重复发送
      if (timer) {
        return;
      }
      // 立即开始倒计时
      startCountdown();
      fetch('/sendVerificationCode?email=' + encodeURIComponent(email), {
        method: 'POST'
      })
              .then(response => response.json())
              .then(data => {
                if (data.code === 0) {
                  alert('验证码已发送到您的邮箱');
                } else {
                  alert(data.msg || '验证码发送失败');
                  // 发送失败也不重置倒计时，防止重复发送
                }
              })
              .catch(error => {
                console.error('发送验证码失败:', error);
                alert('发送验证码失败，请稍后重试');
                // 发送失败也不重置倒计时，防止重复发送
              });
    }
    // 登录
    function login() {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      const captcha = document.getElementById('captcha').value;
      const email = document.getElementById('email').value;
      const verificationCode = document.getElementById('emailCode').value;
  
      if (!username || !password || !captcha || !email || !verificationCode) {
        alert('请填写所有必填项');
        return;
      }
  
      const requestBody = {
        adminName: username,
        adminPassword: password,
        adminEmail: email
      };
  
      fetch('/admin/login?captcha=' + encodeURIComponent(captcha) + '&verificationCode=' + encodeURIComponent(verificationCode), {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestBody),
        credentials: 'include'
      })
      .then(response => response.json())
      .then(data => {
        if (data.code === 0) {
          console.log('登录成功');
          alert('登录成功');
          window.location.href = '/admin/home';
        } else {
          if(data.message==='图形验证码错误'){
            document.getElementById('captchaImg').src = '/vc.jpg?' + new Date().getTime();
            alert('图形验证码错误，请重新输入');
          }
          else if(data.message==='邮箱验证码错误'){
            alert('邮箱验证码错误');
          }
          else{
            document.getElementById('captchaImg').src = '/vc.jpg?' + new Date().getTime();
            alert('用户名密码邮箱不匹配');
          }
        }
      })
      .catch(error => {
        console.error('请求失败', error);
        alert('请求失败，请稍后重试');
        document.getElementById('captchaImg').src = '/vc.jpg?' + new Date().getTime();
      });
    }
  </script>
</body>

</html>